<template>
  <div class="block-form-test">
    <el-card>
      <template #header>
        <h3>区块表单测试</h3>
      </template>
      
      <el-form :model="testForm" label-width="120px">
        <el-form-item label="区块ID">
          <el-input-number v-model="testForm.blockId" :min="1" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="testFormSchema">测试表单Schema</el-button>
          <el-button @click="testFieldsList">测试字段列表</el-button>
        </el-form-item>
      </el-form>
      
      <el-divider />
      
      <div v-if="schemaResult">
        <h4>表单Schema结果：</h4>
        <pre>{{ JSON.stringify(schemaResult, null, 2) }}</pre>
      </div>
      
      <div v-if="fieldsResult">
        <h4>字段列表结果：</h4>
        <pre>{{ JSON.stringify(fieldsResult, null, 2) }}</pre>
      </div>
      
      <el-divider />
      
      <div v-if="testForm.blockId">
        <h4>动态表单测试：</h4>
        <DynamicForm
          :block-id="testForm.blockId"
          v-model="dynamicFormData"
        />
        
        <h4>表单数据：</h4>
        <pre>{{ JSON.stringify(dynamicFormData, null, 2) }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { blockApi } from '@/api/block'
import DynamicForm from '@/components/DynamicForm.vue'

const testForm = reactive({
  blockId: 1
})

const schemaResult = ref(null)
const fieldsResult = ref(null)
const dynamicFormData = ref({})

const testFormSchema = async () => {
  try {
    const response = await blockApi.getFormSchema(testForm.blockId)
    schemaResult.value = response
    ElMessage.success('获取表单Schema成功')
  } catch (error: any) {
    console.error('获取表单Schema失败:', error)
    ElMessage.error('获取表单Schema失败: ' + (error.message || '未知错误'))
  }
}

const testFieldsList = async () => {
  try {
    const response = await blockApi.getBlockFields(testForm.blockId)
    fieldsResult.value = response
    ElMessage.success('获取字段列表成功')
  } catch (error: any) {
    console.error('获取字段列表失败:', error)
    ElMessage.error('获取字段列表失败: ' + (error.message || '未知错误'))
  }
}
</script>

<style scoped>
.block-form-test {
  padding: 20px;
}

pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 300px;
}
</style>
